<template>
  <div class="container">
    <div class="top-div">
      <div style="float: left;line-height: 40px;margin-left: 10px;">
        id
      </div>
      <div style="float: left;margin-left: 5px;">
        <el-input v-model="input1" placeholder="请输入id" style="width: 160px;"></el-input>
      </div>
      <div style="float: left;line-height: 40px;margin-left: 10px;">
        姓名
      </div>
      <div style="float: left;margin-left: 5px;">
        <el-input v-model="input2" placeholder="请输入姓名" style="width: 160px;"></el-input>
      </div>
      <div style="float: left;line-height: 40px;margin-left: 10px;">
        所属庭室
      </div>
      <div style="float: left;margin-left: 5px;">
        <el-input v-model="input3" placeholder="请输入庭室" style="width: 160px;"></el-input>
      </div>
      <div style="float: left;line-height: 40px;margin-left: 10px;">
        联系电话
      </div>
      <div style="float: left;margin-left: 5px;">
        <el-input v-model="input4" placeholder="请输入联系电话" style="width: 160px;"></el-input>
      </div>


      <el-button type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="searchCases">搜索</el-button>
      <el-button icon="el-icon-refresh" style="margin-left: 10px;" @click="resetTable"></el-button>
    </div>
    <el-table :data="tableData" style="width: 100%;height: calc(100vh - 165px);overflow-y: auto;">
      <el-table-column label="id" align="center" min-width="40">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="风险值" align="center" prop="risk" sortable min-width="50">-->
<!--        <template slot-scope="scope">-->
<!--          <div v-if="scope.row.total_risk_change_value>0" style="display: flex;justify-content: center;">-->
<!--            <div style="float: left;margin-top: 10px">-->
<!--              <span>{{ scope.row.total_risk }}</span>-->
<!--            </div>-->
<!--            <div style="float: left;">-->
<!--              <img src="@/assets/up.png" style="width: 20px;height: 20px;margin-top: 10px;">-->
<!--              <span style="color: #e54e4f;font-size: 10px;position: absolute;margin-bottom: 100px;">+{{-->
<!--                  scope.row.total_risk_change_value-->
<!--                }}</span>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div v-else-if="scope.row.total_risk_change_value == 0" style="display: flex;justify-content: center;">-->
<!--            <div style="float: left;margin-bottom: 10px">-->
<!--              <span>{{ scope.row.total_risk }}</span>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div v-else style="display: flex;justify-content: center;">-->
<!--            <div style="float: left;margin-bottom: 10px">-->
<!--              <span>{{ scope.row.total_risk }}</span>-->
<!--            </div>-->
<!--            <div style="float: left;">-->
<!--              <img src="@/assets/down.png" style="width: 20px;height: 20px;margin-bottom: 10px;">-->
<!--              <span style="color: #1ce229;font-size: 10px;position: absolute;margin-bottom: 100px;padding-top: 5px;">{{-->
<!--                  scope.row.total_risk_change_value-->
<!--                }}</span>-->
<!--            </div>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="自然人姓名" align="center" min-width="60">
        <template slot-scope="scope">
          <span>{{ scope.row.natural_person_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center" min-width="40">
        <template slot-scope="scope">
          <span>{{ scope.row.gender }}</span>
        </template>
      </el-table-column>
      <el-table-column label="年龄" align="center" min-width="40">
        <template slot-scope="scope">
          <span>{{ scope.row.age }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属庭室" align="center" min-width="50">
        <template slot-scope="scope">
          <span>{{ scope.row.court_room }}</span>
        </template>
      </el-table-column>
      <el-table-column label="行政职务" align="center" min-width="50">
        <template slot-scope="scope">
          <span>{{ scope.row.administrative_position }}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系电话" align="center" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.contact_number }}</span>
        </template>
      </el-table-column>
      <el-table-column label="昨日结案数" align="center" min-width="60" sortable prop="cases_closed_yesterday">
        <template slot-scope="scope">
          <span style="color: #409EFF;">{{ scope.row.cases_closed_yesterday }}</span>
        </template>
      </el-table-column>
      <el-table-column label="存量案件数" align="center" min-width="50" sortable prop="pending_cases">
        <template slot-scope="scope">
          <span style="color: #409EFF;">{{ scope.row.pending_cases }}</span>
        </template>
      </el-table-column>
      <el-table-column label="今日新增案件" align="center" min-width="50" sortable prop="new_cases_today">
        <template slot-scope="scope">
          <span style="color: #409EFF;">{{ scope.row.new_cases_today }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收案阶段数量" align="center" min-width="50" sortable prop="collection_stage_count">
        <template slot-scope="scope">
          <span style="color: #409EFF;">{{ scope.row.collection_stage_count }}</span>
        </template>
      </el-table-column>
      <el-table-column label="立案阶段数量" align="center" min-width="50" sortable prop="filing_stage_count">
        <template slot-scope="scope">
          <span style="color: #409EFF;">{{ scope.row.filing_stage_count }}</span>
        </template>
      </el-table-column>
      <el-table-column label="审理阶段数量" align="center" min-width="50" sortable prop="trial_stage_count">
        <template slot-scope="scope">
          <span style="color: #409EFF;"> {{ scope.row.trial_stage_count }}</span>
        </template>
      </el-table-column>
      <el-table-column label="执行阶段数量" align="center" min-width="50" sortable prop="execution_stage_count">
        <template slot-scope="scope">
          <span style="color: #409EFF;">{{ scope.row.execution_stage_count }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结案阶段数量" align="center" min-width="50" sortable prop="closed_stage_count">
        <template slot-scope="scope">
          <span style="color: #409EFF;">{{ scope.row.closed_stage_count }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="操作" align="center">-->
<!--        <template slot-scope="scope">-->
<!--          <span style="color: #409EFF;cursor:pointer;" @click="showDetail(scope.row)">详情</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <div style="margin: 10px auto;width: 500px;">
      <el-pagination background
                     @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-size="pageSize" layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import api from '@/utils/api';
import * as echarts from "echarts";
import axios from 'axios'
import data from "@/assets/data1.json";
import user from "@/json/db/user.json";

export default {
  mounted() {
    this.addLog()

    this.initTable()
  },
  computed: {},
  data() {
    return {
      caseTypeList: [
        {
          value: '全部',
          label: '全部'
        },
        {
          value: '民事',
          label: '民事'
        },
        {
          value: '刑事',
          label: '刑事'
        },
        {
          value: '行政',
          label: '行政'
        }
      ],
      caseType: '全部',
      options: [{
        value: '全部',
        label: '全部'
      }, {
        value: '仅风险上升',
        label: '仅风险上升'
      }, {
        value: '仅风险下降',
        label: '仅风险下降'
      }],
      value: '全部',
      currentPage: 1,
      total: 0,
      pageSize: 10,
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: '',
      tableData: [],
      sourceTableData: []
    }
  },
  methods: {
    addLog() {
      const user = require("@/json/db/user.json")
      const obj = {}
      obj.module = '全流程信息统计'
      obj.content = '查看了【人员全流程信息统计】'
      obj.userName = user.userName
      api.addLog(obj);
    },
    showDetail(item) {
      console.log(item)
      const data = {
        doc_id: item.doc_id,
        case_no: item.case_no,
        procedure: item.procedure,
        case_category: item.case_category,
        case_type: item.case_type,
        first_instance: item.first_instance,
        dispute_focus: item.dispute_focus,
        bottomDataList: item.parties
      }
      localStorage.setItem("detailKey", JSON.stringify(data))
      this.$router.push({
        path: '/detail'
      })
    },
    sortChange(val) {
      var data = require('@/json/data/法官.json')
      this.tableData = data
      if (val == '全部') {
        this.total = this.tableData.length
        this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
      } else if (val == '仅风险上升') {
        this.tableData = this.tableData.filter(d => d.total_risk_change_value > 0);
        this.total = this.tableData.length
        this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
      } else if (val == '仅风险下降') {
        this.tableData = this.tableData.filter(d => d.total_risk_change_value < 0);
        this.total = this.tableData.length
        this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
      }
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.initTable();
    },
    //切换当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initTable();
    },
    getNeedArr(array, size) {
      const length = array.length;
      if (!length || !size || size < 1) {
        return [];
      }
      let index = 0;
      let resIndex = 0;
      let result = new Array(Math.ceil(length / size));
      while (index < length) {
        result[resIndex++] = array.slice(index, (index += size));
      }
      return result;
    },
    formattedFeatures(tableFeatures) {
      return tableFeatures.map(feature => feature + '<br>').toString().replaceAll("[", "")
          .replaceAll("]", "")
          .replaceAll(",", "")
          .replaceAll("\"", "");
    },
    initTable() {
      var data = require('@/json/data/法官.json')
      this.tableData = data
      this.total = this.tableData.length
      this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
    },
    resetTable() {
      var data = require('@/json/data/法官.json')
      this.tableData = data
      this.total = this.tableData.length
      this.pageSize = 10
      this.currentPage = 1
      this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
    },
    searchCases() {
      var data = require('@/json/data/法官.json')
      this.tableData = data
      if (this.input1) {
        this.tableData = this.tableData.filter(item => item.id.includes(this.input1));
      }

      if (this.input2) {
        this.tableData = this.tableData.filter(item => item.natural_person_name.includes(this.input2));
      }

      if (this.input3) {
        this.tableData = this.tableData.filter(item => item.court_room.includes(this.input3));
      }

      if (this.input4) {
        this.tableData = this.tableData.filter(item => item.contact_number.includes(this.input4));
      }

      this.total = this.tableData.length
      this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
    }
  }
};
</script>
<style scoped>
.container-footer {
  text-align: center;
  height: 30px;
  line-height: 30px;
  padding-top: 10px;
}

.top-div {
  min-width: 1200px;
  height: 50px;
  padding: 10px;
}

.el-input {
  font-size: 13px;
}

.container {
  min-width: 1200px;
  display: block;
  clear: both;
}

.clearfix:after {
  clear: both
}

/deep/ .el-table .el-table__header th,
.el-table .el-table__header tr,
.el-table .el-table__header td {
  background: #f5f8fd;
}


</style>